<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';

const count = ref(0)
const name = ref('123')

type IPerson = {
    name: string,
    info: {
        address: string,
        phone: string
    }
}

const person = reactive<IPerson>({ name: '张三', info: { address: '北京市朝阳区', phone: '10086' } })


// Watch用法
// watch(响应式数据，(newValue,oldValue)=>{},{deep:true,immediate:true })

// 监听单个用法
// watch(count, (newValue, oldValue) => {
//     console.log(newValue, oldValue);
// })
// 监听多个响应式数据，
watch([count, name], (newValue, oldValue) => {
    console.log(newValue, oldValue);
})

// Watch监听响应式对象中属性的变化
watch(()=>person.name,(newValue,oldValue)=>{
    alert('person的名字改变了'+newValue+oldValue)
})
watch(()=>person.info,(newValue,oldValue)=>{
    alert('person的信息被修改了'+JSON.stringify(newValue)+JSON.stringify(oldValue))
})
// 开启深度监听
// 监听响应式对象数据中的一个属性的变化，配置深度监听
// watch(()=>person.info.address,(newValue,oldValue)=>{
//     alert('person的地址信息被修改了'+JSON.stringify(newValue)+JSON.stringify(oldValue))
// },{
//     deep:true
// })
watch(person,(newValue,oldValue)=>{
    alert('person的地址信息被修改了'+JSON.stringify(newValue)+JSON.stringify(oldValue))
},{
    deep:true,//开启深度监听
    immediate:true // 初始化时执行一次
})
</script>

<template>
    <div class="container">
        <!-- Watch最简单的用法 -->
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div><br>
    <input type="text" v-model="name">
    <br>
    <div>
        <h1>Watch监听属性的变化</h1>
        <ul>
            <li v-for="(value, key, index) in person" :key="index">{{ value }}</li>
        </ul>
        <button @click="person.name = '李四'">修改名字</button>
        <button @click="person.info = { address:'重庆市永川区', phone:'sadlfas'}">修改信息</button>
        <button @click="person.info.address = '山东省菏泽市曹县'">修改地址</button>
    </div>

</template>

<style scoped>
.container {
    display: flex;
}
</style>